<template>
  <div class="sub-main-taicang-view">
    <div class="taicang-select">
      <commonCard title="区划定位" iconName="taicang" canClose @close="clickClose">
        <div class="select-taicang-card-content">
          <div class="taicang-header">
            <span @click="Click(8)">太仓市</span>
          </div>
          <div class="taicang-area">
            <div class="taicang-area-item">
              <span @click="Click(1)">港区(浮桥镇)</span>
            </div>
            <div class="taicang-area-item">
              <span @click="Click(2)">高新区</span>
            </div>
            <div class="taicang-area-item ">
              <span @click="Click(3)">城厢镇</span>
            </div>
            <div class="taicang-area-item">
              <span @click="Click(4)">沙溪镇</span>
            </div>
            <div class="taicang-area-item">
              <span @click="Click(5)">浏河镇</span>
            </div>
            <div class="taicang-area-item">
              <span @click="Click(6)">璜泾镇</span>
            </div>
            <div class="taicang-area-item">
              <span @click="Click(7)">双凤镇</span>
            </div>
            <!-- </div> -->
          </div>
        </div>
      </commonCard>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import commonCard from '@/components/commonCard/index.vue'

export default defineComponent({
  components: {commonCard},
  emits: ["change-value", "close", "refresh"],
  setup(props, context) {
    const Click = (index) => {
      context.emit("change-value", index)
      context.emit("close")
      context.emit("refresh")
    }
    const clickClose = () => {
      context.emit("close")
    }
    return {
      Click,
      clickClose
    }
  }
})

</script>


<style scoped lang="scss">
.sub-main-taicang-view {
  position: absolute;
  top: 0;

  .taicang-select {
    pointer-events: auto;
    width: 240px;
    min-height: 166px;
    box-sizing: border-box;
    left: 560px;
    position: absolute;

    .select-taicang-card-content {
      font-size: 14px;
      color: rgba(240, 245, 255, 0.85);

      .taicang-header {
        margin-bottom: 10px;
        cursor: pointer;
      }

      .taicang-area {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .taicang-area-item {
          margin-bottom: 10px;
          margin-right: 20px;
          cursor: pointer;

          &.no-margin {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>
